<template>
    <div class="comp-order-trackscp" v-loading.fullscreen="loading">
        <template v-if="rep">
            <div class="track" v-for="track in rep.tracks" :key="track.id" :class="{ finished: track.finished === 'yes' }">
                <div class="line"></div>
                <div class="icon"></div>
                <div class="handler">
                    <div class="name">
                        <span>{{ track.handler.name }}</span>
                        <span style="margin: 0 2px">-</span>
                        <span v-if="track.handler.depments.length > 0 && track.handler.depments[0].dept.id === track.dept.id">{{ track.handler.depments[0].duty }}</span>
                    </div>
                </div>
                <div class="content">
                    <div class="value">{{ track.dept.name }}</div>
                </div>
                <div class="content" v-if="track.finished === 'yes'">
                    <div class="name"  v-if="!track.isAdmin" >
                        <span v-if="track.handling === 'return'">未</span>
                        <span>{{ track.typeText }}</span>
                        <span style="margin-left: 2px" v-if="track.handling !== 'yes'">({{ track.handlingText }})</span>
                        <span style="margin: 0 4px">·</span>
                    </div>
                    <div class="value"  v-if="!track.isAdmin">{{ track.finishedAt }}</div>
                </div>
                <div class="content" v-else>
                    <div class="name" v-if="track.type === 'relay'">
                        <span>{{ track.typeText }}</span>
                        <span>中</span>
                        <span style="margin: 0 4px">·</span>
                    </div>
                    <div class="name" v-else>
                        <span>待</span>
                        <span>{{ track.typeText }}</span>
                        <span style="margin: 0 4px">·</span>
                    </div>
                    <div class="value">
                        <span v-if="track.countdownAt">剩余{{ track.countdownAt }}</span>
                        <span style="color: #f22200" v-else>已超时</span><span>催办</span>
                    </div>
                </div>
                <div class="signs" v-if="track.type === 'relay' && track.signs.length > 0">
                    <div class="sign" :key="sign.id" v-for="sign in track.signs">
                        <div class="row" v-if="sign.isAdmin !== '1'">
                            <div class="name">转派给：</div>
                            <div class="value">
                                <span>{{ sign.dept.name }}</span>
                                <span style="margin: 0 2px">-</span>
                                <span>{{ sign.handler.name }}</span>
                            </div>
                        </div>
                        <div class="row" v-if="sign.isAdmin !== '1'">
                            <div class="name">转派时间：</div>
                            <div class="value">{{ sign.createdAt }}</div>
                        </div>
                        <div class="row" v-if="sign.isAdmin !== '1'">
                            
                            <div class="name">转派意见：</div>
                            <div class="value">{{ sign.content }}</div>
                        </div>
                        <div class="row" v-if="sign.files.length > 0">
                            <div class="name">转派附件：</div>
                            <div class="value">
                                <compfilesviewer :files="sign.files"></compfilesviewer>
                            </div>
                        </div>
                        <div class="row" v-if="sign.isAdmin !== '1'">
                            <div class="name">答复状态：</div>
                            <div class="value">{{ sign.typeText }}</div>
                        </div>
                        <div class="row" v-if="sign.finished === 'not' && sign.isAdmin !== '1' && sign.isAdmin !== '1'">
                            <div class="name">答复耗时：</div>
                            <div class="value">{{ sign.duration }} <span style="color: #f22200" v-if="sign.stime>'259200000'">  &nbsp;&nbsp;超时答复</span></div>
                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && sign.type === 'reply' && sign.isAdmin !== '1'">
                            <div class="name">答复时间：</div>
                            <div class="value">{{ sign.finishedAt }}</div>
                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && sign.type === 'reply' && sign.isAdmin !== '1'">
                            <div class="name">答复耗时：</div>
                            <div class="value">{{ sign.duration }} <span style="color: #f22200" v-if="sign.stime>'259200000'">  &nbsp;&nbsp;超时答复</span></div>
                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && sign.type === 'reply'">
                            <div class="name">答复意见：</div>
                            <div class="value">{{ sign.replyContent }}</div>
                            
                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && sign.type === 'return'">
                            <div class="name">退回时间：</div>
                            <div class="value">{{ sign.finishedAt }}</div>
                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && sign.type === 'return'">
                            <div class="name">退回意见：</div>
                            <div class="value">{{ sign.replyContent }}</div>
                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && sign.type === 'revoke'">
                            <div class="name">撤回时间：</div>
                            <div class="value">{{ sign.finishedAt }}</div>
                        </div>
                        <div class="row" v-if="sign.finished === 'yes' && (sign.type === 'reply' || sign.type === 'return') && sign.replyFiles.length > 0">
                            <div class="name">
                                <span v-if="sign.type === 'reply'">答复</span>
                                <span v-else-if="sign.type === 'return'">退回</span>
                                <span>附件：</span>
                            </div>
                            <div class="value">
                                <comp-files-viewer :files="sign.replyFiles"></comp-files-viewer>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content" v-if="track.finished === 'yes' && track.type !== 'relay'">
                    <div class="name">
                        <span v-if="track.handling === 'yes' || track.handling === 'revoke'">{{ track.typeText }}</span>
                        <span v-else-if="track.handling === 'return'">退回</span>
                        <span>意见：</span>
                    </div>
                    <div class="value">{{ track.content }}</div>
                </div>
                <div class="content" v-if="track.finished === 'yes' && track.type !== 'relay' && track.files.length > 0">
                    <div class="name">
                        <span v-if="track.handling === 'yes' || track.handling === 'revoke'">{{ track.typeText }}</span>
                        <span v-else-if="track.handling === 'return'">退回</span>
                        <span>附件：</span>
                    </div>
                    <div class="value">
                        <compfilesviewer style="color:#fff" :files="track.files"></compfilesviewer>
                    </div>
                </div>
                <template v-if="track.finished === 'yes' && track.copytos.length > 0">
                    <div class="content" v-for="copyto in track.copytos" :key="copyto.id">
                        <div class="name">抄送给：</div>
                        <div class="value">{{ copyto.name }}</div>
                    </div>
                </template>
            </div>
            <div class="track finished last">
                <div class="line"></div>
                <div class="icon"></div>
                <div class="handler">
                    <div class="name">
                        <span>{{ order.creator.name }}</span>
                        <span style="margin: 0 2px" v-if="order.userIdDeptRelList">-</span>
                        <span v-if="order.userIdDeptRelList">{{ theSum }}</span>
                    </div>
                </div>
                <div class="content" v-if="order.userIdDeptRelList">
                    <div class="value">{{ theSam }}</div>
                </div>
                <div class="content" v-else-if="order.creator.role === 'holder'">
                    <div class="value">{{ theSam }}</div>
                </div>
                <div class="content">
                    <div class="name">
                        <span>提交</span>
                        <span style="margin: 0 4px">·</span>
                    </div>
                    <div class="value">{{ order.createdAt }}</div>
                </div>
            </div>
        </template>

    </div>
  
</template>

<script>
    import mixin from "../mixin";
    import { string, int } from "../util";
    import compdialog from "../comps/dialog.vue";
    import compfilesviewer from "../comps/files-viewer.vue";
    export default {
        name: "comp-order-trackscp",
        mixins: [mixin],
        props: {
            order: { type: Object, default: null },
        },
        data: () => ({
            loading: false,
            replyidea:null,
            centerDialogVisible:false,
            form:{
                content:"",
                type:null,
                id:null,
            },
            rep:null
        }),
        components:{
            compdialog,
            compfilesviewer      
        },
    
           computed: {
          
            theSum() {
      // 计算数值的总和
                var bumen = ""
                if(this.order.userIdDeptRelList){
                    this.order.userIdDeptRelList.forEach(e => {
                           bumen += e.deptDuty +"、"
                       });
                         return bumen.slice(0, -1)
                }else{

                    return ""
                }
             
              
            },
            theSam(){
                var zhiwu = ""
                     if(this.order.userIdDeptRelList){
                    this.order.userIdDeptRelList.forEach(e => {
                           zhiwu += e.deptIdDepartment.deptName +"、"
                       });
                         return zhiwu.slice(0, -1)
                }else{

                    return ""
                }
            }
        },
        methods: {
            clock() {
                this.timer = clearTimeout(this.timer) || setTimeout(() => this.clock(), 1000);
                // console.log(this.order.tracks);
                this.rep && this.rep.tracks.forEach((track) => {
                    let value = Math.ceil(Math.max(track.countdown - Date.now(), 0) / 1000);
                    let days = Math.floor(value / 86400);
                    let hours = Math.floor(value % 86400 / 3600);
                    let minutes = Math.floor(value % 3600 / 60);
                    let seconds = Math.floor(value % 60);
                    let text = days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
                    if (value > 0 && track.finished === "not") track.countdownAt = text.replace("0天0小时0分钟", "").replace("0天0小时", "").replace("0天", "");
                    else track.countdownAt = "";
                });
            },
        },
        mounted() {
            this.rep = this.order
            this.clock();
        },
        beforeDestroy() {
            this.timer && clearTimeout(this.timer);
        },
    };
</script>

<style lang="scss">

    .comp-order-trackscp {
        overflow: hidden;

        & > .track {
            margin-right: 12px;
            padding: 0 0 18px 32px;

            & > .line {
                position: absolute;
                top: 20px;
                left: 9.5px;
                width: 1px;
                height: calc(100% - 20px);
                background-color: #eee;
            }

            & > .icon {
                position: absolute;
                top: 0;
                left: 0;
                width: 20px;
                height: 20px;
                background: url(../assets/icon70.png) no-repeat center center/contain;
            }

            & > .handler {
                display: flex;
                align-items: flex-start;

                & > .name {
                    flex: 1 1 0;
                    min-height: 20px;
                    color: #fff;
                    font-size: 20px;
                    line-height: 20px;
                }
            }

            & > .content {
                display: flex;
                align-items: flex-start;
                margin-top: 6px;

                & > .name {
                    flex: 0 0 auto;
                    height: 18px;
                    color: #fff;
                    font-size: 20px;
                    line-height: 18px;
                }

                & > .value {
                    flex: 0 1 auto;
                    min-height: 18px;
                    color: #fff;
                    font-size: 20px;
                    line-height: 22px;
                    white-space: pre-wrap;
                    overflow: hidden;
                }
            }

            & > .signs {
                overflow: hidden;

                & > .sign {
                    margin-top: 6px;
                    margin-right: 6px;
                    border-top: solid 1px #eee;
                    padding-top: 6px;

                    & > .row {
                        display: flex;
                        align-items: flex-start;
                        margin-top: 6px;

                        & > .name {
                            flex: 0 0 auto;
                            height: 18px;
                            color: #fff;
                            font-size: 20px;
                            line-height: 18px;
                        }

                        & > .value {
                            flex: 0 1 auto;
                            min-height: 18px;
                            color: #fff;
                            font-size: 20px;
                            line-height: 22px;
                            overflow: hidden;

                            & > .file {
                                display: flex;
                                align-items: flex-start;
                                margin-top: 4px;

                                & > .index {
                                    flex: 0 0 auto;
                                    margin-right: 4px;
                                    height: 18px;
                                    color: #1677ff;
                                    font-size: 20px;
                                    line-height: 22px;
                                }

                                & > .name {
                                    flex: 0 1 auto;
                                    min-height: 18px;
                                    color: #1677ff;
                                    font-size: 20px;
                                    line-height: 22px;
                                    word-break: break-all;
                                }

                                &:first-child {
                                    margin-top: 0;
                                }
                            }
                        }

                        &:first-child {
                            margin-top: 0;
                        }
                    }
                }
            }

            &.finished {
                & > .line {
                    background-color: #1677ff;
                }

                & > .icon {
                    background-image: url(../assets/icon71.png);
                }

                & > .handler {
                    color: #1677ff;
                }
            }

            &.last {
                padding-bottom: 0;

                & > .line {
                    display: none;
                }
            }
        }
    }
</style>